<!DOCTYPE html>
<html lang="zh_CN">
<head>
  <meta charset="UTF-8">
  <title><%= htmlWebpackPlugin.options.title %></title>
  <meta name=Keywords content="<%= htmlWebpackPlugin.options.keywords %>">
  <meta name=Description content="<%= htmlWebpackPlugin.options.description %>">
  <link rel="shortcut icon" href="//www.artup.com/img/logoMin.ico" type="images/x-icon"/>
</head>
<body style="opacity:0;">
<div id="app">
  <unify-header></unify-header>
  <suspension class="suspend" ref="suspend" :show-height="showSuspensionHeight" @mouseleave="suspendPackUp">
    <div class="container">
      <div class="upper">
        <div class="wrapper">
          <label class="suspend-label">艺术磁贴画</label>
          <label class="customization-item"
                 :class="{current:customizationItem==='border'}"
                 @mouseover="suspendPullDown('border')"
                 @click="suspendPullDown('border')">框型：{{!drawSelection&&!drawCoreSelection?'未选择':(currentSelect.type===2?'无框画芯':currentSelect['border'+currentSelect.type].name)}}</label>
          <label
            class="customization-item"
            :class="{current:customizationItem==='size'}"
            @mouseover="suspendPullDown('size')"
            @click="suspendPullDown('size')">尺寸：{{!drawSelection&&!drawCoreSelection?'未选择':currentSelect['size'+currentSelect.type].name}}</label>
          <button class="customization-btn" @click="startCustom(currentSelect.type)">开始定制
          </button>
        </div>
      </div>
      <div class="under">
        <div class="wrapper" style="padding-left:338px;">
          <div class="suspend-color-item"
               v-show="customizationItem==='border'"
               v-for="(border,index) in drawData.borders"
               :class="['background-'+border.code,{active:drawSelection&&currentSelect.type===1&&currentSelect.border1===border}]"
               @click="border1=index,select(1,0,border)&&suspendPackUp()">
            <label>{{border.name}}</label>
          </div>
          <div class="suspend-color-item background-no-border"
               v-show="customizationItem==='border'"
               :class="{active:drawCoreSelection&&currentSelect.type===2}"
               @click="select(2)&&suspendPackUp()">
            <label>无框画芯</label>
          </div>
          <div class="suspend-size-item"
               v-show="customizationItem==='size'"
               v-for="(size,index) in (currentSelect.type===2?drawCoreData.sizes:drawData.sizes)"
               :class="{active:(drawSelection||drawCoreSelection)&&currentSelect['size'+currentSelect.type].code===size.code}"
               @click="select(currentSelect.type,size)&&suspendPackUp()&&(currentSelect.type===2?size2=index:size1=index)">
            {{size.name}}
          </div>
        </div>
      </div>
    </div>
  </suspension>
  <div class="partition">
    <div class="customization">
      <div class="main-choose">
        <div class="left-panel">
          <div class="no-selected" v-show="!drawSelection"></div>
          <img class="preview" v-if="drawSelection" :src="currentSelect.previewImageUrl1"/>
        </div>
        <div class="right-panel">
          <div class="operation">
            <h1 class="title">艺术磁贴画</h1>
            <p class="describe">一个磁力画框，多幅磁贴画芯，只需轻轻一撕一贴，就可完成画面更换，让记忆保持新鲜感，让心情随时随地愉悦起来。</p>
            <label class="label">框型</label>
            <div class="borders">
              <div class="border"
                   :class="[border.code,{selected:drawSelection&&currentSelect.border1.code===border.code}]"
                   v-for="(border,index) in drawData.borders" @click="border1=index,select(1,0,border)"></div>
            </div>
            <label class="label">尺寸</label>
            <div class="sizes">
              <div class="size" :class="['size-'+size.code,{selected:drawSelection&&currentSelect.size1===size}]"
                   v-for="(size,index) in drawData.sizes" @click="size1=index,select(1,size)">{{size.name}}
              </div>
            </div>
            <strong class="price" :class="{loading:!currentSelect.price1}">{{currentSelect.price1}} RMB</strong>
            <button class="btn" @click="startCustom(1)">开始定制</button>
          </div>
        </div>
      </div>
      <div class="core-choose">
        <div class="left-panel">
          <div class="core-show" v-show="!drawCoreSelection"></div>
          <img class="core-preview-image preview" v-if="drawCoreSelection" :src="currentSelect.previewImageUrl2"/>
        </div>
        <div class="right-panel">
          <div class="operation">
            <h1 class="title">磁贴画芯</h1>
            <label class="label">尺寸</label>
            <div class="sizes">
              <div class="size" :class="['size-'+size.code,{selected:drawCoreSelection&&currentSelect.size2===size}]"
                   v-for="(size,index) in drawCoreData.sizes" @click="size2=index,select(2,size)">{{size.name}}
              </div>
            </div>
            <strong class="price" :class="{loading:!currentSelect.price2}">{{currentSelect.price2}} RMB</strong>
            <button class="btn" @click="startCustom(2)">开始定制</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="banner1" ref="showSuspensionFlag">
    <h3>PIONEER</h3>
    <h4>一撕一贴 墙面美学新体验</h4>
  </div>
  <div class="banner2">
    <h3>CHANGE</h3>
    <h4>选择一个磁力画框 搭配多幅磁贴画芯</h4>
  </div>
  <div class="banner3">
    <h3>MATERIAL</h3>
    <h4>UV来袭 滴水不漏</h4>
    <h5>磁芯采用UV材质，防水、不掉色 磁贴画落灰只需拿纸轻轻一擦，即可完成清理</h5>
  </div>
  <div class="banner4"></div>
  <unify-footer></unify-footer>
</div>
</body>
</html>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-113376322-1"></script>
<script>
  window.dataLayer = window.dataLayer || []
  function gtag() {
    dataLayer.push(arguments)
  }
  gtag('js', new Date())

  gtag('config', 'UA-113376322-1')
</script>
